<template>
  <div class="exhibition-login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="login-content">
      <!-- 左侧展示区域 -->
      <div class="exhibition-showcase">
        <div class="showcase-content">
          <div class="exhibition-logo">
            <div class="logo-icon">🏛️</div>
          </div>
          <h1 class="exhibition-title">《永恒的高迪·圣家堂》</h1>
          <h2 class="exhibition-subtitle">VR大空间展览体验</h2>
          <p class="exhibition-description">华南师范大学美术学院</p>
          <div class="showcase-decoration">
            <div class="decoration-line"></div>
            <span class="decoration-text">管理后台系统</span>
            <div class="decoration-line"></div>
          </div>
          
          <!-- 展览信息卡片 -->
          <div class="info-cards">
            <div class="info-card">
              <div class="card-icon">📅</div>
              <div class="card-content">
                <span class="card-label">展览时间</span>
                <span class="card-value">2025.06.25 - 2025.07.22</span>
              </div>
            </div>
            <div class="info-card">
              <div class="card-icon">📍</div>
              <div class="card-content">
                <span class="card-label">展览地点</span>
                <span class="card-value">华师美术学院·石牌校区</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录区域 -->
      <div class="login-section">
        <div class="login-box">
          <div class="login-header">
            <h2 class="login-title">管理员登录</h2>
            <p class="login-subtitle">展馆预约管理系统</p>
          </div>

          <div class="login-form">
            <div class="form-item">
              <label class="form-label">
                <span class="label-icon">👤</span>
                管理员账号
              </label>
              <input 
                type="text" 
                v-model="loginData.username" 
                placeholder="请输入管理员账号"
                class="form-input"
              >
            </div>

            <div class="form-item">
              <label class="form-label">
                <span class="label-icon">🔒</span>
                登录密码
              </label>
              <input 
                type="password" 
                v-model="loginData.password" 
                placeholder="请输入登录密码"
                class="form-input"
                @keyup.enter="login"
              >
            </div>

            <button class="login-btn" @click="login" :disabled="isLoading">
              <span v-if="!isLoading" class="btn-content">
                <span class="btn-icon">🚀</span>
                立即登录
              </span>
              <span v-else class="btn-loading">
                <span class="loading-spinner"></span>
                登录中...
              </span>
            </button>

            <div class="login-tips">
              <div class="tip-item">
                <span class="tip-icon">💡</span>
                <span class="tip-text">请使用管理员账号登录系统</span>
              </div>
              <div class="tip-item">
                <span class="tip-icon">🔐</span>
                <span class="tip-text">系统采用安全加密传输</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { adminLoginService, getAdminInfoService } from '@/api/admin.js'
import { useTokenStore } from '@/stores/token.js'
import { useAdminStore } from '@/stores/admin.js'

const router = useRouter()
const tokenStore = useTokenStore()
const adminStore = useAdminStore()

// 登录数据模型
const loginData = ref({
  username: '',
  password: '',
})

// 加载状态
const isLoading = ref(false)

// 登录函数
const login = async () => {
  try {
    // 表单验证
    if (loginData.value.username === '' || loginData.value.password === '') {
      ElMessage.warning('账号或密码不能为空')
      return
    }

    if (loginData.value.password.length < 5 || loginData.value.password.length > 16) {
      ElMessage.warning('密码长度为5~16位字符')
      return
    }

    console.log('准备登录，用户名:', loginData.value.username, '密码长度:', loginData.value.password.length)
    
    isLoading.value = true

    // 调用登录接口
    const result = await adminLoginService(loginData.value)
    
    console.log('登录响应:', result)
    
    if (result.code === 200) {
      // 存储token
      tokenStore.setToken(result.data.token)
      
      try {
        // 获取管理员信息
        const adminInfo = await getAdminInfoService()
        if (adminInfo.code === 200) {
          adminStore.setAdminInfo(adminInfo.data)
        }
      } catch (infoError) {
        console.warn('获取管理员信息失败:', infoError)
      }
      
              // 跳转到管理主页
        router.push('/dashboard')
    } else {
      // 登录失败
      console.error('登录失败，后端响应:', result)
      ElMessage.error(result.msg || '登录失败，请检查账号密码')
    }

  } catch (error) {
    console.error('登录异常:', error)
    
    // 处理后端返回的业务错误（如密码错误等）
    if (error.code && error.msg) {
      ElMessage.error(error.msg)
    } else if (error.response) {
      // 处理HTTP错误状态码
      const status = error.response.status
      const message = error.response.data?.msg || error.response.data?.message
      
      console.error('HTTP错误:', status, message)
      
      if (status === 401) {
        ElMessage.error('账号或密码错误')
      } else if (status === 403) {
        ElMessage.error('账号已被禁用')
      } else if (status >= 500) {
        ElMessage.error('服务器内部错误，请稍后重试')
      } else {
        ElMessage.error(message || '登录失败')
      }
    } else if (error.request) {
      // 网络错误
      ElMessage.error('网络连接失败，请检查网络设置')
    } else {
      // 其他错误
      ElMessage.error('登录失败，请稍后重试')
    }
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
@import '../assets/login.css';
</style> 